<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">-->
<!--<head th:replace="_fragments :: head(~{::title})">-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>留言</title>-->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">-->
<!--    <link rel="stylesheet" href="../static/css/me.css">-->
<!--</head>-->
<!--<body onload="onload()">-->
<!--<div id="loading">-->
<!--    <div id="loading-center">-->
<!--        <div id="loading-center-absolute">-->
<!--            <div id="object"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="ui fluid container" id="timeDiv">-->
<!--    <h1 id="time" style="color: whitesmoke" class="time">不二臣</h1>-->
<!--    <div class="ui container">-->
<!--        <div align="center">-->
<!--            <img class="ui circular image" align="center" src="../static/images/myavatar.jpg"-->
<!--                 th:src="@{/images/myavatar.jpg}"-->
<!--                 style="width: 150px;height: 150px;">-->
<!--        </div>-->
<!--        <h2 align="center" style="color: whitesmoke;font-family: STXihei;">七个范小浩</h2>-->
<!--        <h3 class="m-font-size-text" align="center">好像在，永远不再</h3>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash;导航&ndash;&gt;-->
<!--<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">-->
<!--    <div class="ui container">-->
<!--        <div class="ui inverted secondary stackable menu">-->
<!--            <h2 class="ui grey header item">Blog</h2>-->
<!--            <a href="#" class=" m-item item m-mobile-hide"><i class=" home icon"></i>首页</a>-->
<!--            <a href="#" class="active m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>-->
<!--            <a href="#" class="m-item item m-mobile-hide"><i class=" tags icon"></i>标签</a>-->
<!--            <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i>归档</a>-->
<!--            <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i>留言</a>-->
<!--            <a href="#" class="m-item item m-mobile-hide"><i class=" info icon"></i>关于我</a>-->
<!--            <div class="right m-item item m-mobile-hide">-->
<!--                <div class="ui icon inverted transparent input m-margin-tb-tiny">-->
<!--                    <input type="text" placeholder="Search....">-->
<!--                    <i class="search link icon"></i>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">-->
<!--        <i class="sidebar icon"></i>-->
<!--    </a>-->
<!--</nav>-->

<!--&lt;!&ndash;中间内容&ndash;&gt;-->
<!--<div class="m-container m-padded-tb-big animated pulse">-->
<!--    <div class="ui container">-->
<!--        <div class="ui top attached segment">-->
<!--            <h3 class="ui grey center aligned header">留言</h3>-->
<!--        </div>-->
<!--        <div class="ui bottom attached segment">-->
<!--            &lt;!&ndash;留言区域列表&ndash;&gt;-->
<!--            <div id="comment-container" class="ui grey segment">-->
<!--                <div th:fragment="commentList">-->
<!--                    <div class="ui threaded comments" style="max-width: 100%;">-->
<!--                        <h3 class="ui dividing header">留言</h3>-->
<!--                        <div class="comment" th:each="comment : ${comments}">-->
<!--                            <a class="avatar">-->
<!--                                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">-->
<!--                            </a>-->
<!--                            <div class="content">-->
<!--                                <a class="author">-->
<!--                                    <span th:text="${comment.nickname}">Matt</span>-->
<!--                                    <div class="ui mini basic grey left pointing label m-padded-mini"-->
<!--                                         th:if="${comment.adminComment}">博主-->
<!--                                    </div>-->
<!--                                </a>-->
<!--                                <div class="metadata">-->
<!--                                    <span class="date"-->
<!--                                          th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>-->
<!--                                </div>-->
<!--                                <div class="text" th:text="${comment.content}">-->
<!--                                    How artistic!-->
<!--                                </div>-->
<!--                                <div class="actions">-->
<!--                                    <a class="reply" data-commentid="1" data-commentnickname="Matt"-->
<!--                                       th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"-->
<!--                                       onclick="reply(this)">回复</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">-->
<!--                                <div class="comment" th:each="reply : ${comment.replyComments}">-->
<!--                                    <a class="avatar">-->
<!--                                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">-->
<!--                                    </a>-->
<!--                                    <div class="content">-->
<!--                                        <a class="author">-->
<!--                                            <span th:text="${reply.nickname}">小红</span>-->
<!--                                            <div class="ui mini basic grey left pointing label m-padded-mini"-->
<!--                                                 th:if="${reply.adminComment}">博主-->
<!--                                            </div>-->
<!--                                            &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-grey">@ 小白</span>-->
<!--                                        </a>-->
<!--                                        <div class="metadata">-->
<!--                                            <span class="date"-->
<!--                                                  th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>-->
<!--                                        </div>-->
<!--                                        <div class="text" th:text="${reply.content}">-->
<!--                                            How artistic!-->
<!--                                        </div>-->
<!--                                        <div class="actions">-->
<!--                                            <a class="reply" data-commentid="1" data-commentnickname="Matt"-->
<!--                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"-->
<!--                                               onclick="reply(this)">回复</a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash;/*&ndash;&gt;-->
<!--                        <div class="comment">-->
<!--                            <a class="avatar">-->
<!--                                <img src="https://unsplash.it/100/100?image=1005">-->
<!--                            </a>-->
<!--                            <div class="content">-->
<!--                                <a class="author">Elliot Fu</a>-->
<!--                                <div class="metadata">-->
<!--                                    <span class="date">Yesterday at 12:30AM</span>-->
<!--                                </div>-->
<!--                                <div class="text">-->
<!--                                    <p>This has been very useful for my research. Thanks as well!</p>-->
<!--                                </div>-->
<!--                                <div class="actions">-->
<!--                                    <a class="reply">回复</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="comments">-->
<!--                                <div class="comment">-->
<!--                                    <a class="avatar">-->
<!--                                        <img src="https://unsplash.it/100/100?image=1005">-->
<!--                                    </a>-->
<!--                                    <div class="content">-->
<!--                                        <a class="author">Jenny Hess</a>-->
<!--                                        <div class="metadata">-->
<!--                                            <span class="date">Just now</span>-->
<!--                                        </div>-->
<!--                                        <div class="text">-->
<!--                                            Elliot you are always so right :)-->
<!--                                        </div>-->
<!--                                        <div class="actions">-->
<!--                                            <a class="reply">回复</a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="comment">-->
<!--                            <a class="avatar">-->
<!--                                <img src="https://unsplash.it/100/100?image=1005">-->
<!--                            </a>-->
<!--                            <div class="content">-->
<!--                                <a class="author">Joe Henderson</a>-->
<!--                                <div class="metadata">-->
<!--                                    <span class="date">5 days ago</span>-->
<!--                                </div>-->
<!--                                <div class="text">-->
<!--                                    Dude, this is awesome. Thanks so much-->
<!--                                </div>-->
<!--                                <div class="actions">-->
<!--                                    <a class="reply">回复</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash;*/&ndash;&gt;-->

<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div id="comment-form" class="ui form">-->
<!--                <input type="hidden" name="blog.id" th:value="${blog.id}">-->
<!--                <input type="hidden" name="parentComment.id" value="-1">-->
<!--                <div class="field">-->
<!--                    <textarea name="content" placeholder="请输入评论信息..."></textarea>-->
<!--                </div>-->
<!--                <div class="fields">-->
<!--                    <div class="field m-mobile-wide m-margin-bottom-small">-->
<!--                        <div class="ui left icon input">-->
<!--                            <i class="user icon"></i>-->
<!--                            <input type="text" name="nickname" placeholder="姓名"-->
<!--                                   th:value="${session.user}!=null ? ${session.user.nickname}">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="field m-mobile-wide m-margin-bottom-small">-->
<!--                        <div class="ui left icon input">-->
<!--                            <i class="mail icon"></i>-->
<!--                            <input type="text" name="email" placeholder="邮箱"-->
<!--                                   th:value="${session.user}!=null ? ${session.user.email}">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="field  m-margin-bottom-small m-mobile-wide">-->
<!--                        <button id="commentpost-btn" type="button" class="ui grey button m-mobile-wide"><i-->
<!--                                class="edit icon"></i>发布-->
<!--                        </button>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->
<!--        </div>-->

<!--    </div>-->
<!--</div>-->


<!--<br>-->
<!--<br>-->
<!--&lt;!&ndash;底部footer&ndash;&gt;-->
<!--<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">-->
<!--    <div class="ui center aligned container">-->
<!--        <div class="ui inverted divided stackable grid">-->
<!--            <div class="three wide column">-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="three wide column">-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>-->
<!--                <div class="ui inverted link list">-->
<!--                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="three wide column">-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>-->
<!--                <div class="ui inverted link list">-->
<!--                    <a href="#" class="item m-text-thin">Email：</a>-->
<!--                    <a href="#" class="item m-text-thin">QQ：</a>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="seven wide column">-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>-->
<!--                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="ui inverted section divider"></div>-->
<!--        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © - Designed by </p>-->
<!--    </div>-->

<!--</footer>-->
<!--&lt;!&ndash;/*/<th:block th:replace="_fragments :: script">/*/&ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>-->
<!--&lt;!&ndash;/*/</th:block>/*/&ndash;&gt;-->

<!--<script>-->
<!--    $('.menu.toggle').click(function () {-->
<!--        $('.m-item').toggleClass('m-mobile-hide');-->
<!--    });-->

<!--    //评论表单验证-->
<!--    $('.ui.form').form({-->
<!--        fields: {-->
<!--            title: {-->
<!--                identifier: 'content',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    prompt: '请输入评论内容'-->
<!--                }-->
<!--                ]-->
<!--            },-->
<!--            content: {-->
<!--                identifier: 'nickname',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    prompt: '请输入你的大名'-->
<!--                }]-->
<!--            },-->
<!--            type: {-->
<!--                identifier: 'email',-->
<!--                rules: [{-->
<!--                    type: 'email',-->
<!--                    prompt: '请填写正确的邮箱地址'-->
<!--                }]-->
<!--            }-->
<!--        }-->
<!--    });-->

<!--    $(function () {-->
<!--        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");-->
<!--    });-->


<!--    $('#commentpost-btn').click(function () {-->
<!--        var boo = $('.ui.form').form('validate form');-->
<!--        if (boo) {-->
<!--            console.log('校验成功');-->
<!--            postData();-->
<!--        } else {-->
<!--            console.log('校验失败');-->
<!--        }-->

<!--    });-->

<!--    function postData() {-->
<!--        $("#comment-container").load(/*[[@{/comments}]]*/"", {-->
<!--            "parentComment.id": $("[name='parentComment.id']").val(),-->
<!--            "blog.id": $("[name='blog.id']").val(),-->
<!--            "nickname": $("[name='nickname']").val(),-->
<!--            "email": $("[name='email']").val(),-->
<!--            "content": $("[name='content']").val()-->
<!--        }, function (responseTxt, statusTxt, xhr) {-->
<!--//        $(window).scrollTo($('#comment-container'),500);-->
<!--            clearContent();-->
<!--        });-->
<!--    }-->

<!--    function clearContent() {-->
<!--        $("[name='content']").val('');-->
<!--        $("[name='parentComment.id']").val(-1);-->
<!--        $("[name='content']").attr("placeholder", "请输入评论信息...");-->
<!--    }-->


<!--    function reply(obj) {-->
<!--        var commentId = $(obj).data('commentid');-->
<!--        var commentNickname = $(obj).data('commentnickname');-->
<!--        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();-->
<!--        $("[name='parentComment.id']").val(commentId);-->
<!--        $(window).scrollTo($('#comment-form'), 500);-->
<!--    }-->


<!--    // // 显示当前时间-->
<!--    // setInterval(function () {-->
<!--    //     var date = new Date(),-->
<!--    //         format = function (n) {-->
<!--    //             return n < 10 ? '0' + n : n-->
<!--    //         };-->
<!--    //     time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds());-->
<!--    // }, 500);-->

<!--    // 动画-->
<!--    document.onreadystatechange = function () {-->
<!--        console.log(document.readyState);-->
<!--        if (document.readyState == "complete") {-->
<!--            $("#loading").fadeOut(500);-->
<!--        }-->
<!--    };-->
<!--</script>-->
<!--</body>-->
<!--</html>-->